<template>
  <div class="container">
    <div class="form-box">
      <h3 class="form-title">新用户注册</h3>
      <el-form
        ref="ruleFormRef"
        :model="ruleForm"
        status-icon
        :rules="rules"
        label-width="120px"
        class="demo-ruleForm"
      > 
        <el-form-item label="用户名" prop="username">
          <el-input v-model="ruleForm.username" type="text" />
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input v-model="ruleForm.password" type="password" />
        </el-form-item>
        <el-form-item label="确认密码" prop="ensurePwd">
          <el-input v-model="ruleForm.ensurePwd" type="password" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="ruleForm.gender">
            <el-radio label="男" border>男</el-radio>
            <el-radio label="女" border>女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="ruleForm.email" type="email" />
        </el-form-item>
        <el-form-item label="手机号" prop="phone">
          <el-input v-model="ruleForm.phone" type="text" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(ruleFormRef)"
            >注册</el-button
          >
          <el-button @click="resetForm(ruleFormRef)">重置</el-button>
        </el-form-item>

      </el-form>

    </div>
  </div>
</template>

<script setup>
//element-plus
import { ElMessage } from 'element-plus'
// api
import userModelApi from '@/request/api/user.js';
import { useRouter } from 'vue-router';

// router
const router = useRouter();

// 获取表单实例
const ruleFormRef = ref()

// 数据
const ruleForm = reactive({
  username: '',
  password: '',
  ensurePwd: '',
  gender: '男',
  email: '',
  phone: ''
})

// 确认密码
const checkPass = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请再次输入密码'))
  } else if (value !== ruleForm.password) {
    callback(new Error("两次密码不一致"))
  } else {
    callback()
  }
}

// 确认邮箱
const checkEmail = (rule, value, callback) => {
  if (value === '') {
    callback(new Error('请输入邮箱'))
  } else if (value.indexOf('@') == -1) {
    callback(new Error("邮箱格式不正确"))
  } else {
    callback()
  }
}

// 确认手机号
const checkPhone = (rule, value, callback) => {
  const reg = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
  if (value === '') {
    callback(new Error('请输入手机号'))
  } else if (!reg.test(value)) {
    callback(new Error("请输入正确的手机号"))
  } else {
    callback()
  }
}


// 校验规则(自定义)
const rules = reactive({
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' },
    { min: 3, max: 12, message: '长度在3-12之间', trigger: 'blur' },
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' },
    { min: 6, max: 12, message: '密码长度在6-12之间', trigger: 'blur' },
  ],
  ensurePwd: [
    { validator: checkPass, required: true, trigger: 'blur' }
  ],
  gender: [
    { required: true }
  ],
  email: [
    { validator: checkEmail, required: true, trigger: 'blur' }
  ],
  phone: [
    { validator: checkPhone, required: true, trigger: 'blur' }
  ]

})


// 提交注册表单
const submitForm = (formEl) => {
  if (!formEl) return
  formEl.validate(async (valid) => {
    if (valid) {
      let params = {};
      for(let key in ruleForm){
        if(key == 'ensurePwd') continue;
        params[key] = ruleForm[key]
      }
      console.log('params', params)
      // 调用注册接口
      const res = await userModelApi.registerApi(params);
      if(res.code == 200){
        ElMessage({
          message: res.msg,
          type: 'success',
        })
        router.push('/login');
      }else{
        ElMessage({
          message: res.msg,
          type: 'error',
        })
      }
    } else {
      ElMessage({
          message: '校验未通过,请检查字段格式',
          type: 'error',
        })
      return false
    }
  })
}

// 重置表单项
const resetForm = (formEl) => {
  if (!formEl) return
  formEl.resetFields()
}
</script>

<style lang='less' scoped>
.container{
  width: 100%;
  height: 100%;
  background: url(../../assets/register-bg.png) no-repeat center;
  display: flex;
  justify-content: center;
  align-items: center;
}

.form-box{
  width: 600px;
  padding: 10px;
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px, rgba(0, 0, 0, 0.3) 0px 30px 60px -30px, rgba(10, 37, 64, 0.35) 0px -2px 6px 0px inset;
  .form-title{
    text-align: center;
    margin: 20px 0;
  }
  /deep/ .el-input{
    width: 80%;
  }
}


</style>